<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智萌客流文档 - 快速入门</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      display: flex;
      background-color: #f8f9fa;
    }
    /* 左侧导航栏样式 */
    .sidebar {
      width: 260px;
      height: 100vh;
      background-color: #fff;
      border-right: 1px solid #e1e4e8;
      padding: 20px 0;
      position: fixed;
      overflow-y: auto;
    }
    .sidebar-header {
      padding: 0 20px 15px;
      border-bottom: 1px solid #eaecef;
      margin-bottom: 15px;
    }
    .sidebar-header h2 {
      font-size: 1.2rem;
      color: #2c3e50;
    }
    .sidebar-nav {
      padding: 0 10px;
    }
    .nav-item {
      margin-bottom: 3px;
    }
    .nav-item > a {
      display: flex;
      align-items: center;
      padding: 8px 15px;
      color: #2c3e50;
      text-decoration: none;
      border-radius: 4px;
      transition: all 0.3s;
    }
    .nav-item > a:hover {
      background-color: #f0f2f5;
      color: #0366d6;
    }
    .nav-item.active > a {
      background-color: #ebf5ff;
      color: #0366d6;
      font-weight: 500;
    }
    .nav-item.has-children > a::after {
      /*content: "▸";*/
      margin-left: auto;
      transition: transform 0.3s;
      font-size: 0.8em;
    }
    .nav-item.has-children.expanded > a::after {
      transform: rotate(90deg);
    }
    .nav-children {
      padding-left: 15px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    .nav-item.expanded > .nav-children {
      max-height: 500px; /* 足够大的值确保能展开 */
    }

    /* 主内容区样式 */
    .main-content {
      flex: 1;
      margin-left: 260px;
      padding: 30px 40px;
      max-width: 900px;
      background-color: #fff;
      min-height: 100vh;
    }
    h1, h2, h3 {
      color: #2c3e50;
      margin-top: 24px;
      margin-bottom: 16px;
      scroll-margin-top: 20px;
    }
    h1 {
      padding-bottom: 10px;
      border-bottom: 1px solid #eaecef;
      margin-bottom: 20px;
    }
    h2 {
      padding-bottom: 8px;
      /*border-bottom: 1px solid #eaecef;*/
    }
    pre {
      background: #f6f8fa;
      padding: 16px;
      border-radius: 4px;
      overflow: auto;
      margin: 15px 0;
    }
    code {
      font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
      font-size: 0.9em;
    }
    ul, ol {
      padding-left: 2em;
      margin: 15px 0;
    }
    li {
      margin-bottom: 8px;
      margin-left: 20px;
    }
    a {
      color: #0366d6;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    .nav-item.has-children > a::after {
      /*content: "▸";*/
      margin-left: auto;
      transition: transform 0.3s;
      font-size: 0.8em;
    }
    .nav-item.has-children.expanded > a::after {
      /*content: "▾"; !* 修改为向下箭头 *!*/
    }
    .nav-children {
      padding-left: 15px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    .nav-item.expanded > .nav-children {
      max-height: 1000px; /* 足够大的值确保展开 */
    }
    .button-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .button {
      padding: 10px 20px;
      font-size: 16px;
      color: white;
      text-align: center;
      text-decoration: none;
      margin: 5px;
    }
    .button1 {
      background-color: #0074D9;
      background-image: linear-gradient(135deg, #0074D9, #0074D9 50%, transparent 50%, transparent);
      background-size: 20px 20px;
    }
    .button2 {
      background-color: #2ECC40;
      background-image: linear-gradient(135deg, #2ECC40, #2ECC40 50%, transparent 50%, transparent);
      background-size: 20px 20px;
    }
    .button3 {
      background-color: #00BFFF;
      background-image: linear-gradient(135deg, #00BFFF, #00BFFF 50%, transparent 50%, transparent);
      background-size: 20px 20px;
    }
    .button4 {
      background-color: #FFDC00;
      background-image: linear-gradient(135deg, #FFDC00, #FFDC00 50%, transparent 50%, transparent);
      background-size: 20px 20px;
    }
    .button5 {
      background-color: #FF4136;
      background-image: linear-gradient(135deg, #FF4136, #FF4136 50%, transparent 50%, transparent);
      background-size: 20px 20px;
    }
  </style>
</head>
<body>
<!-- 左侧导航栏 -->
<div class="sidebar">
  <div class="sidebar-header">
    <h2>智萌客流统计文档</h2>
  </div>
  <div class="sidebar-nav">
<!--    <div class="nav-item">-->
<!--      <a href="#">首页</a>-->
<!--    </div>-->
    <div class="nav-item has-children expanded">
      <a href="#快速开始">快速开始</a>
      <div class="nav-children">
        <div class="nav-item">
          <a href="#使用流程">使用流程</a>
        </div>
        <div class="nav-item">
          <a href="#账号登入">账号登入</a>
        </div>
        <div class="nav-item">
          <a href="#新增组织">新增组织</a>
        </div>
        <div class="nav-item">
          <a href="#新增设备">新增设备</a>
        </div>
        <div class="nav-item">
          <a href="#设备分配">设备分配</a>
        </div>
        <div class="nav-item">
          <a href="#报表查询">报表查询</a>
        </div>
      </div>
    </div>
    <div class="nav-item has-children expanded">
      <a href="#参考">参考</a>
      <div class="nav-children">
        <div class="nav-item">
          <a href="#概览">概览</a>
        </div>
        <div class="nav-item">
          <a href="#报表查询2">报表查询</a>
        </div>
        <div class="nav-item">
          <a href="#运营分析">运营分析</a>
        </div>
        <div class="nav-item">
          <a href="#数据可视化">数据可视化</a>
        </div>
        <div class="nav-item">
          <a href="#配置中心">配置中心</a>
        </div>
        <div class="nav-item">
          <a href="#数据助手">数据助手</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
  <h1>智萌客流快速入门</h1>

  <h2 id="使用流程">使用流程</h2>
<!--  <div class="button-container">-->
<!--    <a href="#" class="button button1">登录账号</a>-->
<!--    <a href="#" class="button button2">新增组织</a>-->
<!--    <a href="#" class="button button3">新增设备</a>-->
<!--    <a href="#" class="button button4">设备分配</a>-->
<!--    <a href="#" class="button button5">报表查询</a>-->
<!--  </div>-->
  <h2>步骤：</h2>
  <h2 id="账号登入">Step-1：登录账号</h2>
  <ul>
    <li>从平台服务商获取首个账号并登录 http://47.117.121.169/login</li>
    <img th:src="@{/img/help/login.png}" width="100%">
    <li>PS:勾选"记住登录状态"，两周内在当前终端再次进入该平台无须登录</li>
  </ul>

  <h2 id="新增组织">Step-2：新增组织</h2>
  <ul>
    <li>首先创建一个一级组织，如某某公司，再创建一个二级组织，如某某门店、购物中心等</li>
    <li>菜单路径：配置中心/组织结构-新增</li>
    <img th:src="@{/img/help/addOrg.png}" width="100%">
    <span style="color: red"> * </span>标记为必填项，非必填项可不填，一个最基本的例子：
    <li>选择”上级组织“</li>
    <li>填写”组织名称“</li>
    <li>选择”营业时间“的开始时间和结束时间</li>
    <li>在”用户授权“栏勾选指定用户，授予当前组织的用户权限，只有勾选的用户才能对该组织的查看和编辑操作</li>
    <li>提交</li>
  </ul>

  <h2 id="新增设备">Step-3：新增设备</h2>
  <ul>
    <li>新增一台新的设备</li>
    <li>菜单路径：配置中心/设备列表-新增</li>
    <img th:src="@{/img/help/addEquipment.png}" width="100%">
    <span style="color: red"> * </span>标记为必填项，非必填项可不填，一个最基本的例子：
    <li>填写”设备名称”</li>
    <li>选择”设备类型“</li>
    <li>选择”所属组织“</li>
    <li>填写”设备IP”</li>
    <li>填写”设备识别码”</li>
    <li>提交</li>
  </ul>

<!--  <h2 id="设备分配">设备分配</h2>-->

  <h2 id="报表查询">Step-5：报表查询</h2>
  <ul>
    <li>现在可以开始试着查询客流量数据了</li>
    <li>菜单路径：报表查询/按场所查询/客流日报表</li>
    <img th:src="@{/img/help/adyStat.png}" width="100%">
    <li>选择场所</li>
    <li>选择需要查询的日期</li>
    <li>点击”查询“</li>
  </ul>

  <h2 id="概览">概览</h2>
  <li>登录 http://47.117.121.169 后首页</li>
  <li>主要有今日、去重、重复、经过客流，今日、本月客流量趋势，客群画像，地区客流量热力图，场所客流量TOP10，客流目标达成率，销售目标达成率等</li>
  <li>地区热度图功能需要在组织结构二级组织编辑界面选择组织的位置信息</li>
  <li>客流目标功能需要在组织结构二级组织编辑界面的客流目标栏填入一个目标数值</li>
  <img th:src="@{/img/help/index.png}" width="100%">

  <h2 id="报表查询2">报表查询</h2>
  <li>丰富的查询方式：按场所查询、按区域查询、按业态查询、机非人查询、数据助手等</li>
  <span>1.按场所查询</span>
  <li>主要有日、周、月、年、多个场所对比、多场所多个时段对比报表等，场所为二级组织，如：店铺、购物中心等</li>
  <img th:src="@{/img/help/adyStat.png}" width="100%">
  <span>2.按区域查询</span>
  <img th:src="@{/img/help/A.png}" width="100%">

  <h2 id="运营分析">运营分析</h2>
  <li>更丰富的应用功能</li>
  <li>区域关注度：自定义多个区域，按区域到访人数，平均驻留时长，不同驻留时长等级等维度来统计分析，并以颜色的深浅来直观的展示该区域的客流人数和驻留时长的热度</li>
  <span>1.峰值分析</span>
  <img th:src="@{/img/help/B.png}" width="100%">
  <span>2.节假日分析</span>
  <img th:src="@{/img/help/C.png}" width="100%">

  <h2 id="数据可视化">数据可视化</h2>
  <li>丰富的大屏可视化定制界面，适用于各种液晶屏、拼接屏、LED屏等展示，支持客流数据以外的各种传感器数据接入</li>
  <img th:src="@{/img/help/D.png}" width="100%">

  <h2 id="配置中心">配置中心</h2>
  <li>主要有账号、权限、角色、组织等功能，可以新建多个子账号，给子账号分配不同的权限和功能等</li>
  <img th:src="@{/img/help/E.png}" width="100%">

  <h2 id="数据助手">数据助手</h2>
  <li>功能开发中</li>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 1. 修复父级菜单展开功能
    document.querySelectorAll('.nav-item.has-children > a').forEach(link => {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        const parent = this.parentElement;

        // 切换展开状态
        parent.classList.toggle('expanded');

        // 手动控制子菜单高度
        const children = parent.querySelector('.nav-children');
        if (parent.classList.contains('expanded')) {
          children.style.height = children.scrollHeight + 'px';
        } else {
          children.style.height = '0';
        }
      });
    });

    // 2. 子菜单点击不触发父级菜单toggle
    document.querySelectorAll('.nav-children a').forEach(childLink => {
      childLink.addEventListener('click', function(e) {
        e.stopPropagation(); // 阻止事件冒泡
      });
    });

    // 2. 联动滚动功能
    const navItems = document.querySelectorAll('.nav-item:not(.has-children)');
    const contentSections = document.querySelectorAll('.main-content h2');
    const mainContent = document.querySelector('.main-content');

    // 点击导航栏平滑滚动到对应内容
    navItems.forEach(item => {
      const link = item.querySelector('a');
      if (link && link.getAttribute('href').startsWith('#')) {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          const targetId = this.getAttribute('href');
          const targetElement = document.querySelector(targetId);

          if (targetElement) {
            targetElement.scrollIntoView({
              behavior: 'smooth',
              block: 'start'
            });
            history.pushState(null, null, targetId);
            updateActiveNav();
          }
        });
      }
    });

    // 自动高亮当前可见的章节
    let lastActiveNav = null;

    function updateActiveNav() {
      let currentSection = null;
      const scrollPosition = window.scrollY + 100;

      contentSections.forEach(section => {
        const sectionTop = section.offsetTop;
        if (scrollPosition >= sectionTop) {
          currentSection = section;
        }
      });

      if (currentSection) {
        const currentId = '#' + currentSection.id;
        navItems.forEach(item => {
          const link = item.querySelector('a');
          if (link && link.getAttribute('href') === currentId) {
            item.classList.add('active');
            if (lastActiveNav && lastActiveNav !== item) {
              lastActiveNav.classList.remove('active');
            }
            lastActiveNav = item;

            // 自动展开父级菜单
            const parentMenu = item.closest('.nav-children')?.parentElement;
            if (parentMenu && parentMenu.classList.contains('has-children')) {
              parentMenu.classList.add('expanded');
            }
          } else {
            item.classList.remove('active');
          }
        });
      }
    }

    // 初始化
    updateActiveNav();

    // 监听滚动事件
    let isScrolling;
    window.addEventListener('scroll', function() {
      window.clearTimeout(isScrolling);
      isScrolling = setTimeout(function() {
        updateActiveNav();
      }, 100);
    }, false);
  });
</script>
</body>
</html>